<template>
        <view v-for="(item, index) in selectTabList" :key="index"
              :class="`card`" @click="changeTab(item)">
            <div :value="item.value" icon="none">
                <div class="p-3px m-w-max-content">
                    <SvgIcon :name="item.svgIcon" class="m-auto tab-svg-fill" :size="item.svgSize"/>
                    <div class="label-text">{{ item.label }}</div>
                </div>
            </div>
        </view>
</template>

<script setup lang="ts">
import SvgIcon from "@/components/svgIcon/svgIcon.vue";
import {selectFiles} from "@/utils/designUtil";
import {Image as LeaferImage} from "leafer-ui";
import {getDefaultName} from "@/views/Editor/utils/utils";
import {useEditor} from "@/views/Editor/app";
const {editor,keybinding} = useEditor()
const selectTabList = [
    {label: '替换', value: 'replace', svgIcon: 'iconfont-replace', svgSize: 20},
]
const changeTab = (item: any) => {
    console.log(item)
    if (item.value === 'replace') {
        insertImg()
    }
}
// 插入图片
const insertImg = async (clear = false) => {
    selectFiles({accept: '.jpg,.png,.jpeg,.svg', multiple: false}).then((fileList) => {
        Array.from(fileList).forEach(async (item) => {
            const url = URL.createObjectURL(item);
            const activeObject = editor.getActiveObject()
            activeObject.setAttr('url',url)
        })
    })
}
</script>

<style scoped>

</style>
